<template>
  	<div class="logincontainer">
          <head-top :head-title="loginType?'密码登录':'手机号登录'" goBack='true'>
              <span slot='changeLogin'  class="changelogin" @click="loginChange">{{loginType?'手机号登录':'密码登录'}}</span>
          </head-top>
          <!-- 密码登录 -->
          <form v-if="loginType">
              <div>
                  <input type="text" placeholder="账号" v-model="loginName">
              </div>
              <div class="pass_box">
                  <input v-if="showPassword" type="password" placeholder="密码" v-model="passWord">
                  <input v-else type="text" placeholder="密码" v-model="passWord">
                <div class="btn_switch" :class="{change_to_text:!showPassword}">
                    <div class="change_switch" :class="{trans_to_right:!showPassword}" @click="change_switch"></div>
                    <span>abc</span>
                    <span>...</span>
                </div>
              </div>
              <div class="captchImg">
                  <input type="text" placeholder="验证码" maxlength="4" v-model="codeNumber">
                  <div class="img_change_img">
                    <img v-show="captchaCodeImg" :src="captchaCodeImg">
                    <div class="change_img" @click="getCaptchaCode">
                        <p>看不清</p>
                        <p>换一张</p>
                    </div>
                </div>
              </div>
          </form>
          <!-- 手机号登录 -->
          <form v-else>
              <div class="tel_box">
                  <input type="tel" name="phone" placeholder="手机号" maxlength="11" v-model="phoneName">
                   <div class="getMessage">
                        <span @click="getPhoneCode" v-show="!computedTime" :class="{bg_code:onlineCode}">获取验证码</span>
                        <span v-show="computedTime">倒计时{{computedTime}}</span>
                    </div>
              </div>
              <div>
                <input type="text" name="mobileCode" placeholder="验证码" maxlength="6" v-model="phonecode">
              </div>
          </form>
          <p>温馨提示：未注册过的账号，登录时将自动注册</p>
          <p>注册过的用户可凭账号密码登录</p>
          <div class="login_btn"><button @click="login_go">登录</button></div>
          <router-link :to="'/forget'" class="to_forget" v-if="loginType">重置密码</router-link>
    </div>
</template>

<script>
    // import headTop from '../../components/header/head'
    import {mapMutations} from 'vuex'
    import {getcaptchas, getLogin, phoneCode, phoneLogin} from '../../api/api'

    export default {
        data(){
            return {
                loginType:true,  //默认密码登录
                showPassword:true,  //默认不显示密码
                loginName:null,  //账号
                passWord:null,   //密码
                captchaCodeImg:null,  //图片验证码
                codeNumber:null,  //验证码
                computedTime: 0, //倒数记时
                phoneName:null,  //手机号
                phonecode:null,    //验证码
                validate_token:null
            }
        },
        created(){
            this.getCaptchaCode();   //一进页面就获取一次验证图片
        },

        computed:{
            onlineCode(){  //手机号验证
                return /^1\d{10}$/gi.test(this.phoneName)
            }
        },
        methods:{
            ...mapMutations([
                'RECORD_USERINFO',
            ]),

            change_switch(){ //密码是否显示
                this.showPassword = !this.showPassword;
            },

            loginChange(){  //密码、手机号登录切换
                this.loginType = !this.loginType;
            },

            getCaptchaCode(){  //获取图片验证码
                getcaptchas().then((res) => {
                    this.captchaCodeImg = res.data.code
                });
            },

            getPhoneCode(){  //获取验证码
                if(!this.onlineCode){
                    alert('请先输入正确的手机号');
                    return
                }
                //倒计时
                this.computedTime = 30;
                this.timer = setInterval(()=>{
                    this.computedTime--;
                   if(this.computedTime == 0){
                       clearInterval(this.timer);
                   }
                },1000);

                phoneCode(this.phoneName).then((res)=>{
                    this.validate_token = res.data.validate_token;
                })

            },

            login_go(){ //登录
                if(this.loginType){//密码登录
                    if(!this.loginName){
                        alert('请先输入账号');
                        return
                    }else if(!this.passWord){
                        alert('请输入密码');
                        return
                    }else if(!this.codeNumber){
                        alert('请先输入验证码');
                        return
                    }
                    getLogin(this.loginName, this.passWord, this.codeNumber).then((res) => {
                         this.$router.go(-1);
                     });
                }else{ //手机号登录
                     if(!this.phoneName){
                        alert('请先输入手机号');
                        return
                    }else if(!this.phonecode){
                        alert('请先输入验证码');
                        return
                    }
                    phoneLogin(this.phonecode, this.phoneName, this.validate_token).then((res) => {
                         this.$router.go(-1);
                         this.RECORD_USERINFO(res.data.userInfo);
                     });
                }

                
            }
        }
        
    }


</script>

<style lang="scss" scoped>
  @import '../../style/mixin';
  .logincontainer{
      padding-top: 1.95rem;
      form{
          margin-top:.5rem;
          background:#fff;
          >div{
              border-bottom: 1px solid #ccc;
          }
          input {
              width:100%;
              padding:.5rem;
              font-size:.75rem;
          }
      }
      p{
          padding:.5rem .5rem 0;
           @include sc(.6rem, red);
      }
    }
 .changelogin{
    position: absolute;
    right: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: .6rem;
    color: #fff;
 }
 .pass_box{
     display: flex;
     .btn_switch{
         @include wh(2.5rem, 50%);
        margin-top: .5rem;
        margin-right: .5rem;    
        position: relative;
        background: #ccc;
        border-radius: .5rem;
         @include sc(.75rem, #fff);
        .change_switch{
            @include wh(1.2rem, 1.2rem);
            border-radius: 54%;
            position: absolute;
            left: 0;
            top: -3px;
            transition: all .3s;
            background: #f1f1f1;
        }
        .trans_to_right{
            transform: translateX(1rem);
        }
        span{
            color:#fff;
        }
     }
     .change_to_text{
        background-color: #4cd964;
    }
 }
 .captchImg{
     display: flex;
     input{
         flex:1;
     }
     .img_change_img{
         display:flex;
         padding-top:5px;
         img{
             width: 3rem;
            height: 1.5rem;
            margin-right: .2rem;
         }
         p{
             padding:0;
             padding-right:.5rem;
             color:#3b95e9;
         }
     }
 }
 .login_btn{
    padding: .5rem;
    button{
        display: inline-block;
         @include wh(100%, 2rem);
         @include sc(.875rem, #fff);
        background: #4cd964;
        border-radius: 5px;
    }
 }
 .to_forget{
    float: right;
    font-size: 0.6rem;
    color: #3b95e9;
    margin-right: .3rem;
 }
 .tel_box{
     display: flex;
     input{
         flex:1;
     }
     .getMessage{
        margin: .5rem;
        background-color: #ccc;
        border-radius: 5px;
        @include sc(.5rem, #fff);
        span{
            @include sc(.5rem, #fff);
             padding: .313rem;
        }
        .bg_code{
         background-color: #3b95e9;
     }
     }
 }
 
   

</style>
